<template>

	<view>
		<pc-carousel :data="imgList" field="img" @selection="selection"  ref="lunbo"></pc-carousel>
	</view>
	
</template>

<script setup>
	import { onMounted, ref, toRaw } from 'vue';
	import { BASE_URL, request } from "@/utils/request.js"
	import { onLoad, onReady, onShow, onHide, onUnload, onPageScroll } from "@dcloudio/uni-app"

	const dataList = ref([]);
	const imgList = ref([]); 
	
	const lunbo = ref(null);
	onReady(()=>{ //dom体挂载完毕
		console.log("onReady函数");
		console.log(lunbo.value);
		console.log(lunbo.value.getDatalist);
		
		getDataList().then(  ()=>{
			console.log("datalist already get in icon3");
			lunbo.value.getDatalist();
		});
	})
	
	const getDataList = async function(){
		let res = await request( {url: 'product/all'} );
		console.log("all product data: ");
		console.log(res.data);
		
		dataList.value = res.data;
		dataList.value.forEach( obj=>{
			imgList.value.push( {name:obj.name, img:BASE_URL + `product/image/${obj.id}`} );
		});
		console.log("imgList: ");
		console.log( imgList.value );

	}
	
	const selection = function(e){
		console.log(e)
	}
	

	
	
</script>

<style lang="scss" scoped>

</style>
